{% extends "admin/admin_base.html" %}

{% block title %}API调用日志{% endblock %}
{% block breadcrumb %}API调用日志{% endblock %}
{% block content %}
<style>
    .badge {
        padding: 0.25rem 0.5rem;
        border-radius: 999px;
        font-size: 0.75rem;
        font-weight: 500;
    }

    .badge-success {
        background-color: rgba(0, 180, 42, 0.1);
        color: var(--success-color);
    }

    .badge-danger {
        background-color: rgba(245, 63, 63, 0.1);
        color: var(--danger-color);
    }

    .badge-warning {
        background-color: rgba(255, 125, 0, 0.1);
        color: var(--warning-color);
    }

    .badge-primary {
        background-color: rgba(22, 93, 255, 0.1);
        color: var(--primary-color);
    }

    /* 金牌用户（月度会员） */
    .badge-month {
        background-color: #FFF9C4; /* 浅金背景（接近鎏金质感） */
        color: #D4AF37; /* 金属金色文字 */
        border: 1px solid #FFECB3; /* 浅边框增强层次感 */
    }

    /* 铂金用户（季度会员） */
    .badge-season {
        background-color: #E3F2FD; /* 淡蓝背景（类似铂金冷冽感） */
        color: #1976D2; /* 钴蓝色文字 */
        border: 1px solid #BBDEFB; /* 更浅的蓝边框 */
    }

    /* 至尊用户（年度/管理员） */
    .badge-year,
    .badge-admin {
        background: linear-gradient(135deg, #7B1FA2 0%, #4A148C 100%); /* 紫红渐变（尊贵感） */
        color: #FFFFFF; /* 白色文字高对比 */
        box-shadow: 0 2px 4px rgba(123, 31, 162, 0.15); /* 轻微投影提升立体感 */
    }

    /* 普通用户 */
    .badge-free {
        background-color: #F5F5F5; /* 浅灰背景（中性百搭） */
        color: #616161; /* 深灰文字 */
        border: 1px solid #EEEEEE; /* 极浅灰边框 */
    }

    .action-btn {
        background: none;
        border: none;
        color: #86909C;
        cursor: pointer;
        padding: 0.25rem;
        margin: 0 0.125rem;
        transition: color 0.2s ease;
    }
</style>
<div class="data-table mb-4">
    <div class="table-header">
        <div class="table-title">调用日志列表</div>
        <div class="table-actions">
            <form id="searchForm" class="input-group" style="width: 300px;" method="get">
                <input type="text" name="search" class="form-control" placeholder="搜索用户名、ID..."
                       value="{{ search or '' }}">
                <button class="btn btn-primary" type="submit">
                    <i class="fas fa-search"></i>
                </button>
            </form>
        </div>
    </div>
    <div class="table-responsive">
        <table>
            <thead>
            <tr>
                <th>ID</th>
                <th>用户ID</th>
                <th>用户名</th>
                <th>用户类型</th>
                <th>调用链接</th>
                <th>调用时间</th>
            </tr>
            </thead>
            <tbody>
            {% for alg in data_apilogs %}
            <tr>
                <td>{{ alg.id }}</td>
                <td>{{ alg.user_id }}</td>
                <td><a href="/admin/apilogs?search={{ alg.user.username }}" >{{ alg.user.username }}</a></td>
                <td>
                    {% if alg.user.user_type.value == 'month' %}
                    <span class="badge badge-month">金牌用户</span>
                    {% elif alg.user.user_type.value == 'season' %}
                    <span class="badge badge-season">铂金用户</span>
                    {% elif alg.user.user_type.value == 'year' %}
                    <span class="badge badge-year">至尊用户</span>
                    {% elif alg.user.user_type.value == 'admin' %}
                    <span class="badge badge-admin">至尊用户</span>
                    {% else %}
                    <span class="badge badge-free">普通用户</span>
                    {% endif %}
                </td>
                <td>{{ alg.url }}</td>
                <td>{{ alg.created_at.strftime('%Y-%m-%d %H:%M') }}</td>
            </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
    <!-- 分页 -->
    <div class="pagination-container d-flex justify-content-between align-items-center mt-3">
        <div class="pagination-info">显示 {{ data_apilogs|length }} 条，共 {{ total_apilogs }} 条</div>
        <div class="pagination">
        <!-- 上一页 -->
        <a href="?page={{ page-1 if page > 1 else 1 }}{% if search %}&search={{ search }}{% endif %}"
           class="btn {% if page == 1 %}btn-outline-secondary disabled{% else %} btn-outline-primary{% endif %}">
            <i class="fas fa-chevron-left"></i>
        </a>

        <!-- 分页按钮（修复 max/min 问题） -->
        {% if total_pages > 0 %}
            {% set start_page = (page - 2) if (page - 2) >= 1 else 1 %}
            {% set end_page = (page + 2) if (page + 2) <= total_pages else total_pages %}
            {% for p in range(start_page, end_page + 1) %}
                <a href="?page={{ p }}{% if search %}&search={{ search }}{% endif %}"
                   class="btn btn-outline-primary {% if p == page %}active{% endif %}">{{ p }}</a>
            {% endfor %}
        {% endif %}

        <!-- 下一页 -->
        <a href="?page={{ page+1 if page < total_pages else total_pages }}{% if search %}&search={{ search }}{% endif %}"
           class="btn {% if page == total_pages %}btn-outline-secondary disabled{% else %} btn-outline-primary{% endif %}">
            <i class="fas fa-chevron-right"></i>
        </a>
    </div>
    </div>

</div>
{% endblock %}

{% block scripts %}
<script>

</script>
{% endblock %}
